<template>
  <div class="modal-from">
    <a-modal :visible="visible" @cancel="visible=false" maskClosable title="获取飞鱼线索客户"   :width="600" >
      <a-row style="height: 120px;">
        <a-col :span="12">
          <a-form :form="form" layout="inline">
            <a-form-item label="手机号码" has-feedback  class="input-search" >
              <a-input-search
                placeholder="填写客户线索手机号"
                style="width: 230px;"
                enter-button
                :maxLength="11"
                @search="onSearch"
                v-decorator="['telPhone',{rules: [{ required: true, message: '请输入联系号码！' }]}]"/>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col v-if="checkFlag" :span="12">
             <a-form  layout="inline" labelAlign="left" >
              <a-form-item
                label="选择客户诉求"
                has-feedback
              >
                 <a-cascader
                      style="width:250px"
                      allow-clear        
                      expand-trigger="hover"
                      :show-search="{ filter }"
                      :options="ConsultationAppeal"
                      v-model="testArr"
                      placeholder="请补全客户诉求"
                  />
              </a-form-item>
            </a-form>
        </a-col>
        
      </a-row>
      <a-card style="background: #F0F2F5;height: 230px;" >
        <a-descriptions title="客户线索" :column="1">
          <a-descriptions-item label="客户姓名">
            <span v-if="hasResult" class="g-color">{{customerLeads.name}}</span>
            <span v-else >-</span>
          </a-descriptions-item>
          <br/>
          <a-descriptions-item label="客户电话">
            <span v-if="hasResult" class="g-color">{{customerLeads.tel}}</span>
            <span v-else >-</span>
          </a-descriptions-item>
          <br/>
          <a-descriptions-item label="客户线索">
            <span v-if="hasResult" class="g-color">{{customerLeads.leads}}</span>
            <span v-else >-</span>
          </a-descriptions-item>
        </a-descriptions>

      </a-card>
      <!--页脚-->
      <template slot="footer">
        <a-button key="back" @click="visible=false">取消</a-button>
        <a-button key="submit" :disabled="disableOK" type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
    </a-modal>
    <a-modal :visible="feiyuTableVisible" :footer="null" @cancel="feiyuTableVisible=false"  title="双击选择飞鱼线索客户"  :width="500" >
      <a-table :columns="feiyuColumns" :data-source="feiyuCustomerList" :pagination="false" :rowKey="(record,index)=>index" :customRow="feiyuRowclick"></a-table>
    </a-modal>

    <!--用户模块弹出窗，待优化抽离-->
    <a-modal :visible="tableVisible" title="双击选择客户" :alert="true" :width="800" @cancel="cancelTableVisible">
      <a-table :columns="columns" :data-source="customerDataTable" :rowKey="(record,index)=>index" :customRow="Rowclick"></a-table>
    </a-modal>

  </div>
</template>
<script>
import {
  getConsulationListByTel,
  getFeiyuCustomerList,
  addFeiyuCustomer,
  getClientDemandName
} from '@/api/modular/main/customer/customerConsultation'



export default {
  data() {
    return {
      hasResult:false, //有无搜索结果
      form: this.$form.createForm(this),
      cardLoading: false,
      feiyuId: '',
      customerDataTable: [],
      feiyuCustomerList: [],
      customerLeads: {
        states: true,
        name: '-',
        tel: '-',
        leads: '-',
        hint: '',
        crmFeiyuCustomerId: ''
      },
      parameter: {
        customerId: '',
        crmFeiyuCustomerId: ''
      },

      loading: false,
      visible: false,
      feiyuTableVisible: false,
      tableVisible: false,
      feiyuColumns: [
        {title: '序号', width: 60, scopedSlots: {customRender: 'index'}, fixed: 'left'},
        {title: '客户姓名', dataIndex: 'name', width: 100,},
        {title: '客户电话', dataIndex: 'tel', width: 100,},
        {title: '客户线索', dataIndex: 'leads', width: 100,}
      ],
      columns: [

        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '卡号',
          dataIndex: 'cardNo'
        },
        {
          title: '开发员',
          dataIndex: 'developer',
          customRender: age => age ? age : '无'
        },
        {
          title: '咨询师',
          dataIndex: 'consultMan', //如果需要整行的数据则去掉该字段
          customRender: consultMan => {
            return consultMan ? consultMan : '无'
          }
        },
        {
          title: '登记时间',
          dataIndex: 'recordDate',
        }
      ],
      ConsultationAppeal:[],
      testArr:[],
      checkFlag:false
    }
  },
  computed:{
    disableOK(){
      // const tel =this.form.getFieldValue('telPhone')
      if(!this.hasResult){
        return true
      }
      return false
    }
  },
  methods: {
    filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    showModal() {
      this.hasResult=false
      this.visible = true
      this.form.resetFields()

      getClientDemandName().then(res => {
          this.ConsultationAppeal = res.rows     
      })
      this.Reset()
    },
    onSearch() {
      const tel =this.form.getFieldValue('telPhone')
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单检验未通过111',errors,values)
          this.confirmLoading = false
          return
        }
        getFeiyuCustomerList(tel).then(res => {
          if(res.code==200){
            this.feiyuCustomerList = res.data
            if (this.feiyuCustomerList.length === 0) {
              this.cardLoading = false
              this.form.setFields({
                telPhone:{
                  errors:[{ message:'未查找到飞鱼线索客户！', field: 'telPhone'}],
                  value:tel
                }
              })
              this.hasResult=false //无结果
              return
            }
            if (this.feiyuCustomerList.length === 1) {
              this.cardLoading = false
              this.customerLeads.states = true
              this.customerLeads.name = this.feiyuCustomerList[0].name
              this.customerLeads.tel = this.feiyuCustomerList[0].tel
              this.customerLeads.leads = this.feiyuCustomerList[0].leads
              this.customerLeads.crmFeiyuCustomerId = this.feiyuCustomerList[0].crmFeiyuCustomerId
              this.hasResult=true //有结果
              if(this.feiyuCustomerList[0].checkFlag == "1"){
                 this.checkFlag=false
              }else{
                this.checkFlag=true
              }
              return
            }
            if (this.feiyuCustomerList.length > 1) {
              this.feiyuTableVisible = true
            }
          }else{
            this.checkFlag=false
            this.form.setFields({
              telPhone:{
                errors:[{ message:res.message, field: 'telPhone'}],
                value:tel
              }
            })
          }

        })
      })

    },
    handleOk() {
      this.loading = true
      // if (!this.customerLeads.tel || this.customerLeads.tel === '-') {
      //   this.$message.warning('请查询飞鱼客户后在提交')
      //   this.loading = false
      //   return
      // }

      const tel =this.form.getFieldValue('telPhone')
      console.log('666',this.customerLeads.tel,tel)
      getConsulationListByTel(this.customerLeads.tel).then(res => {
        console.log('提交的结果：',res)
        if(res.code == 200){
          this.resToRender(res)
        
          this.loading = false
        }else {
          this.$message.info(res.message)
        }

      })
    },
    /**
     判断渲染表格
     * */
    resToRender(res) {
      //搜索不到用户
      if (res.rows.length <= 0) {
        //新增客户
        this.parameter.customerId = null
        this.parameter.crmFeiyuCustomerId = this.customerLeads.crmFeiyuCustomerId
        this.addFeiyuCustomer()
      } else if (res.rows.length === 1) {
        this.customerDataTable = res.rows
        // this.tableVisible = true
        this.parameter.customerId = res.rows[0].customerId
        this.parameter.crmFeiyuCustomerId = this.customerLeads.crmFeiyuCustomerId
        this.addFeiyuCustomer()
        //直接新增电网咨询
      } else {
        //弹框
        this.tableVisible = true
        this.customerDataTable = res.rows
      }
    },
    //添加飞鱼客户
    addFeiyuCustomer() {
      if (!this.parameter.crmFeiyuCustomerId || this.parameter.crmFeiyuCustomerId === '') {
        this.tableVisible = false
        this.$message.warning('请重新选择飞鱼客户')
        return
      }
      if(this.checkFlag && this.testArr.length ==0)
      {
         this.$message.warning("请补全客户诉求！")  
         return  
      }

      if(this.checkFlag && this.testArr.length == 2){
        this.parameter.dept_id=this.testArr[0]
        this.parameter.item_id=this.testArr[1]
      }
      console.log("param",this.parameter)

      addFeiyuCustomer(this.parameter).then(res => {
        if (res.code === 200) {
          this.visible = false
          this.$emit('reload')
          this.$message.info(res.message)
        }else{
          this.$message.warning(res.message)
        }
        this.tableVisible=false
        this.feiyuTableVisible=false
      })
    },

    




    //选择系统客户
    Rowclick(record, index) {
      return {
        on: {
          dblclick: () => {
            console.log('1111',record)
            this.parameter.customerId = record.customerId
            this.addFeiyuCustomer()
          }
        }
      }
    },
    //选择飞鱼客户
    feiyuRowclick(record, index) {
      return {
        on: {
          dblclick: () => {
            console.log('0000',record)
            this.customerLeads = record
            this.parameter.crmFeiyuCustomerId = record.crmFeiyuCustomerId
            this.customerLeads.states = true
            this.feiyuTableVisible=false
            this.tableVisible = false
            this.hasResult=true //有结果

             if(record.checkFlag == "1"){
                 this.checkFlag=false
              }else{
                this.checkFlag=true
              }


          }
        }
      }
    },
    cancelTableVisible() {
      //取消模态框
      this.loading = false
      this.tableVisible=false
      this.Reset()//清空表单
    },
    Reset() {
      this.cardLoading = false
      this.form.resetFields()
      this.feiyuId = ''
      this.customerDataTable = []
      this.feiyuCustomerList = []
      this.customerLeads = {
        states: true,
        name: '-',
        tel: '-',
        leads: '-',
        hint: '',
        crmFeiyuCustomerId: ''
      }
      this.parameter = {
        customerId: '',
        crmFeiyuCustomerId: ''
      }
      this.loading = false
    }
  },
}
</script>
<style lang="less" scoped>
/deep/ .has-error.has-feedback .ant-form-item-children-icon {
  right: 52px;
}
</style>